<script>
	import HzResult from "@/components/layout/hz/hz-result.vue";
	import {
		getUserOrderList
	} from '@/api/mall';

	export default {
		name: "success",
		components: {
			HzResult
		},
		data() {
			return {
				delta: 1,
				id: 0,
				orderInfo: null,
				loading: true,
				// 不同商品类型的提示信息
				successMessages: {
					// 默认信息
					default: {
						title: "支付成功",
						message1: "您的订单已确认,我们正在为您精心准备商品。",
						message2: "感谢您的信任，愿这次购物体验如春风般美好～"
					},
					// 酒店类型 - 13
					13: {
						title: "支付成功",
						message1: "您的酒店预订已成功提交，我们正在与酒店确认房态信息。确认结果将通过短信及时发送给您，请您留意查收。",
						message2: "如有任何疑问，欢迎随时联系我们。感谢您的信任与支持！"
					},
					// 门票类型 - 11
					11: {
						title: "购票成功",
						message1: "您的门票已预订成功，请按照预定时间前往景区。",
						message2: "祝您旅途愉快，留下美好回忆～"
					},
					// 活动类型 - 18
					18: {
						title: "报名成功",
						message1: "您已成功报名活动，请按照活动时间安排参加。",
						message2: "期待与您在活动中相遇，共同创造精彩时刻～"
					},
					// 套餐类型 - 17
					17: {
						title: "支付成功",
						message1: "您的套餐预订已确认，我们已为您安排好所有服务。",
						message2: "感谢您的选择，期待为您提供优质的服务体验～"
					}
				},
				order_qrcode: null
			}
		},
		computed: {
			// 根据订单信息计算对应的提示信息
			successInfo() {
				// 如果订单信息不存在或类型未知，使用默认提示
				if (!this.orderInfo || !this.orderInfo.ProductType) {
					if (this.integral) {
						return {
							title: this.$t('success.types.exchange.title'),
							message1: this.$t('success.types.exchange.message1'),
							message2: this.$t('success.types.exchange.message2')
						};
					}
					return {
						title: this.$t('success.types.default.title'),
						message1: this.$t('success.types.default.message1'),
						message2: this.$t('success.types.default.message2')
					};
				}

				// 获取订单的商品类型
				const productType = this.orderInfo.ProductType;

				// 判断是否为积分兑换
				if (this.integral) {
					return {
						title: this.$t('success.types.exchange.title'),
						message1: this.$t('success.types.exchange.message1'),
						message2: this.$t('success.types.exchange.message2')
					};
				}

				// 根据不同类型返回相应的提示信息
				if (productType === 13) {
					return {
						title: this.$t('success.types.hotel.title'),
						message1: this.$t('success.types.hotel.message1'),
						message2: this.$t('success.types.hotel.message2')
					};
				} else if (productType === 11) {
					return {
						title: this.$t('success.types.ticket.title'),
						message1: this.$t('success.types.ticket.message1'),
						message2: this.$t('success.types.ticket.message2')
					};
				} else if (productType === 18) {
					return {
						title: this.$t('success.types.activity.title'),
						message1: this.$t('success.types.activity.message1'),
						message2: this.$t('success.types.activity.message2')
					};
				} else if (productType === 17) {
					return {
						title: this.$t('success.types.package.title'),
						message1: this.$t('success.types.package.message1'),
						message2: this.$t('success.types.package.message2')
					};
				}

				// 默认提示
				return {
					title: this.$t('success.types.default.title'),
					message1: this.$t('success.types.default.message1'),
					message2: this.$t('success.types.default.message2')
				};
			}
		},
		onLoad(options) {
			if (options && options.delta) {
				this.delta = parseInt(options.delta);
				this.id = options.id;
				this.integral = options.integral === "true"
				// 获取订单详情信息
				this.getOrderDetail();
			}
			this.order_qrcode = uni.getStorageSync('order_qrcode');
		},
		methods: {
			// 获取订单详情
			async getOrderDetail() {
				if (!this.id) return;

				try {
					this.loading = true;
					const {
						Data
					} = await getUserOrderList({
						OrderId: this.id
					});

					if (Array.isArray(Data) && Data.length > 0) {
						// 新的数据格式是数组，取第一项
						this.orderInfo = Data[0];

						// 如果有详细信息，获取商品类型
						if (this.orderInfo.OrdersOnlineInfoViewList &&
							this.orderInfo.OrdersOnlineInfoViewList.length > 0) {
							const productInfo = this.orderInfo.OrdersOnlineInfoViewList[0];
							this.orderInfo.ProductType = productInfo.ProductType;
						}
					} else if (Data) {
						// 兼容旧格式
						this.orderInfo = Data;
					}

					console.log('订单信息:', this.orderInfo);
				} catch (error) {
					console.error('获取订单详情失败:', error);
				} finally {
					this.loading = false;
				}
			},

			goHome() {
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			jumpOrderDetails() {
				let that = this;
				if (this.id) {
					// uni.navigateTo({
					//   url: "/mall_subpages/order/details?id=" + this.id
					// })
					if (this.order_qrcode && this.id == this.order_qrcode.orderId) {
						uni.navigateTo({
							url: `/ticket_subpages/traffic/mpBuyTickets?id=${this.order_qrcode.routeId}&locationId=${this.order_qrcode.locationId}`
						})
					} else {
						// uni.switchTab({
						// 	url,
						// 	success() {
						// 		that.$store.commit("setCurrent", 2)
						// 	}
						// })
						uni.navigateTo({
							url: "/pages/qrcode/index",
							success() {
								that.$store.commit("setCurrent", 2)
							}
						})
					}

				} else {
					uni.showToast({
						title: this.$t('success.noOrderId')
					})
				}
			},
			back() {
				console.log(this.delta)
				uni.navigateBack({
					delta: this.delta
				})
			}
		}
	}
</script>

<template>
	<view>
		<u-navbar title="结果" @leftClick="back"></u-navbar>
		<view class="loading-container" v-if="loading">
			<u-loading-icon mode="circle" size="36"></u-loading-icon>
			<text class="loading-text">{{$t('success.loading')}}</text>
		</view>
		<hz-result v-else type="success" :title="successInfo.title" paddingTop="196">
			<text class="describe">{{successInfo.message1}}</text>
			<br>
			<text class="describe">{{successInfo.message2}}</text>
			<view class="control">
				<button class="btn" @click="jumpOrderDetails">{{$t('success.writeOff')}}</button>
				<button class="btn" @click="goHome">{{$t('success.backToHome')}}</button>
			</view>
		</hz-result>
	</view>
</template>

<style scoped lang="scss">
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 60vh;

		.loading-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.describe {
		padding: 0 70rpx;
		text-align: center;
		margin-bottom: 10rpx;
		color: #333;
	}

	.control {
		display: flex;
		gap: 30rpx;
		margin-top: 50rpx;
	}

	.btn {
		height: 86rpx;
		background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 44rpx;
		transition: all 0.3s ease;
		letter-spacing: 2rpx;
		width: 200rpx;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 8rpx rgba(73, 143, 255, 0.2);
		}
	}
</style>